
const weakMap = new WeakMap();

const ob = new IntersectionObserver((entries)=>{
  entries.forEach((item)=>{
    const {isIntersecting,target} = item;
    if(isIntersecting&&weakMap.has(target)){
      weakMap.get(target).play();
      ob.unobserve(target);
    }
  })
})


const items = document.querySelectorAll(".item");

function isBelowViewport(el){
  const rect = el.getBoundingClientRect();
  const height = el.clientHeight;
  return rect.top - height < window.innerHeight;
}

for (let index = 0; index < items.length; index++) {
  const item = items[index];
  if(isBelowViewport(item)){
    continue;
  }
  ob.observe(item);
  weakMap.set(item,handlerAnimation(item,index))
  // handler(item)
}

const animation = new Animation()

function handlerAnimation(el){
  const animation = el.animate([
    {
      transform:"translateY(100%)",
      opacity:".5",
    },
    {
      transform:"translateY(0)",
      opacity:"1",
    },

  ],{
    duration:500,
    easing:"ease-in-out",
    fill:"forwards",
  });

  animation.pause();

  return animation
}